<template>
  <div class="login-bg">
    <div class="container">
      <div class="login-form">
        <h2 class="title">用户登录</h2>
        <div class="item">
          <el-input placeholder="请输入用户名" v-model="username" prefix-icon="el-icon-user-solid"></el-input>
        </div>
        <div class="item">
          <el-input
            placeholder="请输入密码"
            v-model="password"
            prefix-icon="el-icon-unlock"
            show-password
            @keyup.native.enter="login"
          ></el-input>
        </div>
        <div class="error-item">
          <el-alert :title="errMsg" type="error" :show-icon="hasErrorMsg" :closable="false"></el-alert>
        </div>
        <div class="item">
          <el-button type="primary" :loading="loging" @click="login">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Icon, Input, Button, Alert } from 'element-ui';
import { login, checkLogin } from '@/api/user.js';
export default {
  components: {
    [Icon.name]: Icon,
    [Input.name]: Input,
    [Button.name]: Button,
    [Alert.name]: Alert
  },
  name: 'Login',
  data () {
    return {
      username: '',
      password: '',
      loging: false,
      errMsg: ''
    }
  },
  computed: {
    hasErrorMsg () {
      return !this.errMsg == '';
    }
  },
  mounted () {
    checkLogin()
      .then(() => {
        this.$router.push('/home');
      })
      .catch((e)=>{
      });
  },
  methods: {
    login () {
      if (this.username == '') {
        this.errMsg = '用户名为空';
        return;
      }
      if (this.password == '') {
        this.errMsg = '密码为空';
        return;
      }
      this.errMsg = '';
      this.loging = true;
      login({
        username: this.username,
        password: this.password
      }).then((res) => {
        this.$router.push('/home');
      }).catch((errMsg) => {
        this.loging = false;
        this.errMsg = errMsg.msg;
        
      })
    }
  }

}
</script>
<style lang="stylus" scoped>
$bg = #2d3a4b;
$inputBgColor = #3e4957;
$color = white;
$cursorColor = white;

.login-bg {
  background-color: $bg;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  .container {
    width: 1280px;
    margin: 0 auto;

    .login-form {
      .title {
        color: $color;
        margin-top: 150px;
        text-align: center;
        font-size: 28px;
        cursor: pointer;
      }

      .error-item {
        width: 520px;
        margin: 0 auto;
        margin-top: -20px;
        height: 20px;

        .el-alert--error {
          background-color: $bg;
          margin: 0;
          padding: 0;
        }
      }

      .item {
        width: 520px;
        margin: 0 auto;
        margin-bottom: 20px;

        .el-input {
          font-size: 18px;
          height: 40px;

          >>> input {
            background-color: $inputBgColor;
            border: 0;
            caret-color: $$cursorColor;
            color: $color;
          }
        }

        button {
          display: block;
          width: 100%;
        }
      }
    }
  }
}
</style>
